import { ContentContainer } from '@/components/layout/ContentContainer'
import Loading from '@/components/Loading'
import MenuTabs from '@/components/MenuTabs'

import { routes as PanelRoutes } from '@/router/Panel'
import { IconHandle } from '@douyinfe/semi-icons'
import { IconCard } from '@douyinfe/semi-icons-lab'
import { TabPane, Tabs } from '@douyinfe/semi-ui'
import React from 'react'
import { useMatches } from 'react-router-dom'

const LogsView = styled.div`
  font-size: 12px;
  transition: 0.3s;
  position: relative;
  width: calc(100vw - 70px);
  /* padding: 10px; */
  z-index: 10;
  display: flex;
  flex-direction: column;
  /* background-color: var(--semi-color-bg-1); */
  height: 250px;
  .log-rect {
    flex: 1;
    padding: 0 10px;
    border: 1px solid var(--semi-color-border);
    background-color: var(--semi-color-bg-1);
    overflow: hidden;
  }
  .content {
    height: 200px;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    p {
      padding: 5px 0;
    }
  }
  .btn-action {
    position: absolute;
    cursor: pointer;
    border-radius: 50px 50px 0px 0px;
    background: var(--semi-color-fill-2);
    color: var(--semi-color-text-3);
    width: 60px;
    height: 15px;
    left: calc(50vw - 100px);
    border: solid 1px var(--semi-color-fill-1);
    border-bottom: 0;
    /* position: absolute; */
    top: -15px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .g {
    color: var(--semi-color-primary);
  }
  .r {
    color: var(--semi-color-danger);
  }
`

const Panel = () => {
  const [visibleLog, setVisibleLog] = useState(false)
  const navigate = useNavigate()
  const isDark = useCommonStore((state) => state.isDark)
  const matches = useMatches()
  const routes = PanelRoutes.find((item) => item.id == matches[1].id) ?? { children: [], path: '' }
  
  return (
    <>
      <ContentContainer style={{ padding: 0 }} className="flex flex-col h-[100%] relative">
        <div className="flex flex-1 overflow-hidden">
          <MenuTabs
            isCursor={true}
            activeKey={matches[2].id}
            data={routes.children}
            indexKey="id"
            mode="horizontal"
            className="w-[160px] overflow-y-auto"
            itemFontSize={14}
            itemPadding="0 14px"
            style={{ background: isDark ? '#2F363C' : '' }}
            onTapClick={(item) => navigate(item.path)}
          ></MenuTabs>
          <div
            className="flex-1 p-3 overflow-y-auto bg-[var(--semi-color-bg-0)]"
          >
            <React.Suspense fallback={<Loading />}>
              <Outlet />
            </React.Suspense>
          </div>
        </div>
        <LogsView style={{ height: visibleLog ? 250 : 0 }} title="日志信息">
          <div className="btn-action" onClick={() => setVisibleLog(!visibleLog)}>
            <IconHandle size="small" style={{ transform: 'rotate(90deg)' }} />
          </div>
          <div className="log-rect" style={{ borderWidth: visibleLog ? 1 : 0 }}>
            <Tabs type="line" size="small" lazyRender>
              <TabPane tab="终端" itemKey="0">
                <div className="content">
                  <p>
                    Resetting frp [Erase Method] : <span className="g">OK</span>{' '}
                  </p>
                  <p>
                    Rebooting device... <span className="g">OK</span>
                  </p>
                </div>
              </TabPane>
              <TabPane tab="日志" itemKey="1">
                <div className="content overflow-hidden overflow-y-auto">
                  <p>Bootloader:</p>
                  <p>
                    Resetting frp [Erase Method] : <span className="g">OK</span>{' '}
                  </p>
                  <p>
                    Rebooting device... <span className="g">OK</span>
                  </p>
                  <p>
                    UAT PRO : 168.0.1 | 28 - April -2024 <span className="r">[ 10:14:56 ]</span> INDIA Elapsed Time : 51
                    seconds
                  </p>
                  <p>Bootloader:</p>
                  <p>
                    Resetting frp [Erase Method] : <span className="g">OK</span>{' '}
                  </p>
                  <p>
                    Rebooting device... <span className="g">OK</span>
                  </p>
                  <p>
                    UAT PRO : 168.0.1 | 28 - April -2024 <span className="r">[ 10:14:56 ]</span> INDIA Elapsed Time : 51
                    seconds
                  </p>
                  <p>
                    Resetting frp [Erase Method] : <span className="g">OK</span>{' '}
                  </p>
                  <p>
                    Rebooting device... <span className="g">OK</span>
                  </p>
                  <p>
                    UAT PRO : 168.0.1 | 28 - April -2024 <span className="r">[ 10:14:56 ]</span> INDIA Elapsed Time : 51
                    seconds
                  </p>
                  <p>
                    Resetting frp [Erase Method] : <span className="g">OK</span>{' '}
                  </p>
                  <p>
                    Rebooting device... <span className="g">OK</span>
                  </p>
                  <p>
                    UAT PRO : 168.0.1 | 28 - April -2024 <span className="r">[ 10:14:56 ]</span> INDIA Elapsed Time : 51
                    seconds
                  </p>
                </div>
              </TabPane>
            </Tabs>
          </div>
        </LogsView>
      </ContentContainer>
    </>
  )
}

export default Panel
